Now, let ’ s run our app. Login, click on the ‘ Add Todo ’ link and you should be able to add a todo. The new todo

should appear in the todos page (fig. 5).

Figure 5

Editing a Todo

To have our AddTodo component edit a todo, add in two sections of code in add-todo.js as shown below:

Modify Bold Code

…

const AddTodo = props => {

let editing = false;

let initialTodoTitle = "";

let initialTodoMemo = "";

if (props.location.state && props.location.state.currentTodo) {

editing = true;

initialTodoTitle = props.location.state.currentTodo.title;

initialTodoMemo = props.location.state.currentTodo.memo;

}

…

const saveTodo = () => {

var data = {

title: title,

memo: memo,

completed: false,

}

if (editing) {

TodoDataService.updateTodo(

props.location.state.currentTodo.id,

data, props.token)

.then(response => {

setSubmitted(true);

console.log(response.data)

})

.catch(e => {

console.log(e);

})

}

else {